<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" +
            request.getServerPort() + request.getContextPath() + "/";
%>
<html lang="en">
<head>
    <base href="<%=basePath%>" />
    <meta charset="UTF-8">
    <link href="jquery/bootstrap_3.3.0/css/bootstrap.min.css" type="text/css" rel="stylesheet" />
    <link href="jquery/bootstrap-datetimepicker-master/css/bootstrap-datetimepicker.min.css" type="text/css" rel="stylesheet" />
    <script type="text/javascript" src="jquery/jquery-1.11.1-min.js"></script>
    <script type="text/javascript" src="jquery/bootstrap_3.3.0/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="jquery/bootstrap-datetimepicker-master/js/bootstrap-datetimepicker.js"></script>
    <script type="text/javascript" src="jquery/bootstrap-datetimepicker-master/locale/bootstrap-datetimepicker.zh-CN.js"></script>
    <link rel="stylesheet" type="text/css" href="jquery/bs_pagination/jquery.bs_pagination.min.css">
    <script type="text/javascript" src="jquery/bs_pagination/jquery.bs_pagination.min.js"></script>
    <script type="text/javascript" src="jquery/bs_pagination/en.js"></script>
    <script type="text/javascript">

        <%--模态框，也就是出现一个小框，不用弹出一个新的页面--%>
        $(function(){

            // 页面加载完成时分页查询出数据
            pageList(1,2);

            // 为搜索按钮注册条件查询时间，已完成
            $("#searchBtn").click(function () {

                //单击查询按钮的时候将查询条件全部保存在隐藏域中，
                //$("#hidden-id").val($("#search-id").val());
                $("#hidden-name").val($("#search-name").val());
                $("#hidden-num").val($("#search-num").val());
                $("#hidden-createTime").val($("#search-createTime").val());
                $("#hidden-organizationPeople").val($("#search-organizationPeople").val());
                $("#hidden-effectiveTime").val($("#search-effectiveTime").val());
                $("#hidden-situation").val($("#search-situation").val());
                pageList(1,2);
            });

            // 全选框
            $("#qx").on("click",function () {
                $("input[name=xz]").prop("checked",this.checked);
            });

            // 动态生成的标绑定单击事件的用法
            // 下面是外层有效标签的jQuery对象（不是动态生成的标签）
            $("#checkBody").on("click",$("input[name=xz]"),function () {
                // 这里表示选择框的总数量等于被选选择框的数量 那么全选框就勾选 否则就不勾选
                $("#qx").prop("checked",$("input[name=xz]").length==$("input[name=xz]:checked").length);
            });

            //更新数据
            // 为修改市场活动模态窗口中的保存按钮绑定事件
            $("#updateBtn").on("click",function(){
                // 拿到需要添加的属性值
                var id = $("#hidden-edit-id").val();
                var name = $("#hidden-edit-name").val();
                var num = $("#hidden-edit-num").val();
                var createTime = $("#edit-createTime").val();
                var organizationPeople = $("#edit-organizationPeople").val();
                var effectiveTime = $("#edit-effectiveTime").val();
                var situation = $("#edit-situation").val();



                $.ajax({
                    url:"workbench/Check_guolu/updateCheck.do",//地址最后写,更改整体数据
                    data:{
                        "id":id,
                        "name":name,
                        "num":num,
                        "createTime":createTime,
                        "organizationPeople":organizationPeople,
                        "effectiveTime":effectiveTime,
                        "situation":situation,
                    },
                    dataType:"json",
                    type:"post",
                    success:function (data) {
                        // 隐藏模态窗口
                        $("#editCheckModal").modal("hide");
                        if(data.success){
                            // 刷新活动信息列表
                            alert("修改成功！");
                            // 清空模态窗口
                        }else {
                            alert("修改失败！")
                        }

                    }
                });
                // 保持当前页不动
                pageList($("#checkPage").bs_pagination('getOption', 'currentPage')
                    ,$("#checkPage").bs_pagination('getOption', 'rowsPerPage'));
            });


            //更新用户2.0
            $("#editBtn").on("click",function () {

                // 拿到选中的复选框，xz是看选了多少条数据
                var $xz = $("input[name=xz]:checked");
                // var owner ;//所有者owner
                // 没有选择提示用户
                if ($xz.length == 0){
                    alert("请选择需要修改的记录");
                }else if($xz.length >1){
                    alert("请选择最多一条记录");
                }else{
                    // 后台取数据
                    $.ajax({
                        url:"workbench/Check_guolu/getCheckById.do",//根据ID获得当前用户信息
                        data: {
                            "id":$xz.val()},  // 传入id
                        type:"get",
                        dataType:"json",
                        success:function (data) {
                            $("#hidden-edit-id").val(data.checkById.id);
                            $("#hidden-edit-name").val(data.checkById.name);
                            $("#hidden-edit-num").val(data.checkById.num);
                            $("#edit-createTime").val(data.checkById.createTime);
                            $("#edit-organizationPeople").val(data.checkById.organizationPeople);
                            $("#edit-effectiveTime").val(data.checkById.effectiveTime);
                            $("#edit-situation").val(data.checkById.situation);


                            // 隐藏域中保存id
                            $("#hidden-edit-checkId").val(data.checkById.id);
                        }
                    });
                    //打开模态窗口
                    $("#editCheckModal").modal("show");
                }
            });

            // 打印按钮绑定
            $("#printBtn").click(function () {
                // 给用户一个确定删除的提示
                if (confirm("是否要打印报表")) {
                    // 因为请求参数可能有多个 提前拼接起来
                    $.ajax({
                        url: "workbench/Check_guolu/pageList1.do",
                        data: {},
                        type: "get",
                        dataType: "json",
                        success: function (data) {
                            // 获得了一系列数据了
                            if (data.success) {
                                alert("打印成功");

                            } else {

                                alert("打印失败，请重新打印");
                            }
                        }
                    });
                }
            });

//删除用户

            // 为删除按钮绑定事件
            $("#deleteBtn").on("click",function () {

                // 拿到所有选中框的jquery数组
                var $xz = $("input[name=xz]:checked");

                // 一条选中记录都没有 提示用户
                if($xz.length == 0){
                    alert("请选择需要删除的记录");
                }else {

                    // 给用户一个确定删除的提示
                    if(confirm("确定删除所选中的记录吗？id为"+$xz[0].value)){
                        // 因为请求参数可能有多个 提前拼接起来
                        var param =	"";
                        for (var i = 0; i < $xz.length; i++) {
                            param += "id=" + $xz[i].value ;
                            if(	i < $xz.length - 1){
                                param += "&";
                            }
                        }
                        $.ajax({
                            url:"workbench/Check_guolu/delete.do",//删除的地址
                            data:param,
                            type:"post",
                            dataType:"json",
                            success:function (data) {
                                // 返回true则删除成功 否则删除失败
                                if(data.success){
                                    alert(data.msg);
                                    pageList( 1 ,$("#checkPage").bs_pagination('getOption', 'rowsPerPage'));
                                    //要修改
                                }else {
                                    // 将所有复选框取消选择
                                    $("#qx").prop("checked",false);
                                    alert(data.msg);
                                }
                            }
                        });
                    }
                }
            });




            //创建用户,已完成
            // 为创建按钮绑定事件 目的是在打开模态窗口的同时绑定一些事件
            $("#addBtn").click(function () {

                $("#createCheckModal").modal("show");
            });




            $("#saveBtn").click(function () {
                // 拿到需要添加的属性值
                //var id = $("#create-marketcheckID").val();
                var name = $("#create-name").val();
                var num = $("#create-num").val();
                var createTime = $("#create-createTime").val();
                var organizationPeople = $("#create-organizationPeople").val();
                var effectiveTime = $("#create-effectiveTime").val();
                var situation = $("#create-situation").val();
                $.ajax({
                    url:"workbench/Check_guolu/saveCheck.do",
                    data:{

                        "name":name,
                        "num":num,
                        "createTime":createTime,
                        "organizationPeople":organizationPeople,
                        "effectiveTime":effectiveTime,
                        "situation":situation,

                    },
                    dataType:"json",
                    type:"post",
                    success:function (data) {

                        if(data.success){
                            // 回到第一页  保持每页记录数量不变
                            pageList(  1  ,$("#checkPage").bs_pagination('getOption', 'rowsPerPage'));

                            // 清空和关闭添加操作的模态窗口
                            $("#createCheckModal").modal("hide");
                            $("#saveForm").get(0).reset();
                        }else {

                            // 保持当前页不动
                            pageList($("#checkPage").bs_pagination('getOption', 'currentPage')
                                ,$("#checkPage").bs_pagination('getOption', 'rowsPerPage'));
                            $("#createCheckModal").modal("hide");
                            alert("添加市场活动失败！")
                        }

                    }
                });
            });
        });






        // 分页查询 展示信息   pageNo传页数 pageSize传每一页的记录条数
        function pageList(pageNo , pageSize) {

            // 将所有复选框取消选择
            $("#qx").prop("checked", false);

            // 每次发送ajax请求的时候 将保存在隐藏域中的查询条件赋值到文本框中的查询条件
            // 可以有效避免查询出错
            //$("#search-id").val($("#hidden-id").val());
            $("#search-name").val($("#hidden-name").val());
            $("#search-num").val($("#hidden-num").val());
            $("#search-createTime").val($("#hidden-createTime").val());
            $("#search-organizationPeople").val($("#hidden-organizationPeople").val());
            $("#search-effectiveTime").val($("#hidden-effectiveTime").val());
            $("#search-situation").val($("#hidden-situation").val());
            $.ajax({
                url: "workbench/Check_guolu/pageList.do",//分页查询数据，是所有数据
                data: {
                    // 分页查询的条件
                    "pageNo": pageNo,
                    "pageSize": pageSize,
                    // 搜索条件 利用动态sql 有就填 没有就不填
                    //"id": $.trim($("#search-id").val()),
                    "name": $.trim($("#search-name").val()),
                    "num": $.trim($("#search-num").val()),
                    "createTime": $.trim($("#search-createTime").val()),
                    "organizationPeople": $.trim($("#search-organizationPeople").val()),
                    "effectiveTime": $.trim($("#search-effectiveTime").val()),
                    "situation": $.trim($("#search-situation").val()),
                },
                dataType: "json",
                type: "get",
                success: function (data) {
                    // 把数据添加到活动列表中
                    $("#checkTr01").empty();
                    $("#checkTr02").empty();
                    $.each(data.dataList, function (index, element) {//每次显示两行数据
                        if (index == 0) {
                            $("#checkTr01").append("<td><input type='checkbox' name='xz' value='" + element.id + "'/></td>");
                            $("#checkTr01").append("<td>" + element.name + "</td>");
                            $("#checkTr01").append("<td>" + element.num + "</td>");
                            $("#checkTr01").append("<td>" + element.createTime + "</td>");
                            $("#checkTr01").append("<td>" + element.organizationPeople + "</td>");
                            $("#checkTr01").append("<td>" + element.effectiveTime + "</td>");
                            $("#checkTr01").append("<td>" + element.situation + "</td>");

                        } else if (index == 1) {
                            $("#checkTr02").append("<td><input type='checkbox' name='xz' value='" + element.id + "'/></td>");
                            $("#checkTr02").append("<td>" + element.name + "</td>");
                            $("#checkTr02").append("<td>" + element.num + "</td>");
                            $("#checkTr02").append("<td>" + element.createTime + "</td>");
                            $("#checkTr02").append("<td>" + element.organizationPeople + "</td>");
                            $("#checkTr02").append("<td>" + element.effectiveTime + "</td>");
                            $("#checkTr02").append("<td>" + element.situation + "</td>");
                        }

                    });


                    // 获取总页数 总记录条数除每没一页展示的条数 向上取整
                    var totalPages = Math.ceil(parseFloat(data.totalSize / pageSize));
                    $("#checkPage").bs_pagination({
                        currentPage: pageNo, // 页码
                        rowsPerPage: pageSize, // 每页显示的记录条数
                        maxRowsPerPage: 20, // 每页最多显示的记录条数
                        totalPages: totalPages, // 总页数
                        totalRows: data.totalSize, // 总记录条数

                        visiblePageLinks: 3, // 显示几个卡片

                        showGoToPage: true,
                        showRowsPerPage: true,
                        showRowsInfo: true,
                        showRowsDefaultInfo: true,

                        onChangePage: function (event, data) {
                            pageList(data.currentPage, data.rowsPerPage);
                        }
                    });
                }
            });
        }

    </script>
</head>
<body>
<%--隐藏域 用来保存信息--%>
<%--<input type="hidden" id="hidden-id"/>--%>
<input type="hidden" id="hidden-name"/>
<input type="hidden" id="hidden-num"/>
<input type="hidden" id="hidden-createTime"/>
<input type="hidden" id="hidden-organizationPeople"/>
<input type="hidden" id="hidden-effectiveTime"/>
<input type="hidden" id="hidden-situation"/>
<input type="hidden" id="hidden-edit-checkId"/>

<input type="hidden" id="hidden-edit-id"/>
<input type="hidden" id="hidden-edit-name"/>
<input type="hidden" id="hidden-edit-num"/>




<!-- 创建的模态窗口 已完成-->
<div class="modal fade" id="createCheckModal" role="dialog">
    <div class="modal-dialog" role="document" style="width: 85%;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">
                    <span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title" id="myModLabel1">创建锅炉检测情况处理</h4>
            </div>
            <div class="modal-body">al

                <form id="saveForm" class="form-horizontal" role="form">

                    <div class="form-group">

                        <label for="create-name" class="col-sm-2 control-label">船名<span style="font-size: 15px; color: red;">*</span></label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="text" class="form-control" id="create-name">
                        </div>
                        <label for="create-num" class="col-sm-2 control-label">检测编号</label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="text" class="form-control" id="create-num">
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="create-createTime" class="col-sm-2 control-label ">检测时间</label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="date" class="form-control time" id="create-createTime">
                        </div>

                        <label for="create-organizationPeople" class="col-sm-2 control-label ">办理人</label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="text" class="form-control time" id="create-organizationPeople" >
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="create-effectiveTime" class="col-sm-2 control-label ">有效期</label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="date" class="form-control time" id="create-effectiveTime">
                        </div>

                        <label for="create-situation" class="col-sm-2 control-label ">业务办理情况</label>
                        <div class="col-sm-10" style="width: 300px;">
                            <input type="text" class="form-control time" id="create-situation" >
                        </div>
                    </div>

                </form>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="saveBtn">保存</button>
            </div>
        </div>
    </div>
</div>

<!-- 修改的模态窗口 -->
<div class="modal fade" id="editCheckModal" role="dialog">
    <div class="modal-dialog" role="document" style="width: 85%;">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">
                    <span aria-hidden="true">×</span>
                </button>
                <h4 class="modal-title" id="myModalLabel2">修改锅炉检测资料</h4>
            </div>
            <div class="modal-body">

                <form class="form-horizontal" role="form" id="editForm">

                    <div class="form-group">

                        <label for="edit-createTime" class="col-sm-2 control-label">检测时间</label>
                        <div class="col-sm-10" style="width: 300px;height: 50px;">
                            <input type="date" class="form-control" id="edit-createTime">
                        </div>

                        <label for="edit-organizationPeople" class="col-sm-2 control-label">办理人</label>
                        <div class="col-sm-10" style="width: 300px;height: 50px;">
                            <input type="text" class="form-control" id="edit-organizationPeople">
                        </div>

                    </div>

                    <div class="form-group">

                        <label for="edit-effectiveTime" class="col-sm-2 control-label">有效期</label>
                        <div class="col-sm-10" style="width: 300px;height: 50px;">
                            <input type="date" class="form-control" id="edit-effectiveTime">
                        </div>
                        <label for="edit-situation" class="col-sm-2 control-label">业务办理情况</label>
                        <div class="col-sm-10" style="width: 300px;height: 50px;">
                            <input type="text" class="form-control" id="edit-situation">
                        </div>
                    </div>
                </form>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="updateBtn">更新</button>
            </div>
        </div>
    </div>
</div>



<%--第一步：页面布局--%>
<div>
    <div style="position: relative; left: 10px; top: -10px;">
        <div class="page-header">
            <h3>船只锅炉检测处理</h3>
        </div>
    </div>
</div>
<div style="position: relative; top: -20px; left: 0px; width: 100%; height: 100%;">
    <div style="width: 100%; position: absolute;top: 5px; left: 10px;">

        <div class="btn-toolbar" role="toolbar" style="height: 120px;">
            <form class="form-inline" role="form" style="position: relative;top: 8%; left: 5px;">
                <div>
                    <div class="form-group">
                        <div class="input-group">
                            <div class="input-group-addon">船名</div>
                            <input class="form-control" type="text" id="search-name">
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="input-group">
                            <div class="input-group-addon">检测编号</div>
                            <input class="form-control" type="text" id="search-num">
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="input-group">
                            <div class="input-group-addon">检测时间</div>
                            <input class="form-control" type="date" id="search-createTime">
                        </div>
                    </div>
                </div>
                <div>
                    <div class="form-group">
                        <div class="input-group">
                            <div class="input-group-addon">办理人</div>
                            <input class="form-control" type="text" id="search-organizationPeople">
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="input-group">
                            <div class="input-group-addon">有效期</div>
                            <input class="form-control" type="date" id="search-effectiveTime">
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="input-group">
                            <div class="input-group-addon">业务办理情况</div>
                            <input class="form-control" type="text" id="search-situation">
                        </div>
                    </div>
                </div>
                <div>
                    <button type="button" id="searchBtn" class="btn btn-default">查询</button>
                </div>
            </form>
        </div>
        <button type="button" id="printBtn" class="btn btn-default">报表打印</button>

        <div class="btn-toolbar" role="toolbar" style="background-color: #F7F7F7; height: 50px; position: relative;top: 5px;">
            <div class="btn-group" style="position: relative; top: 18%;">
                <%--
                三个功能，两个模态窗口，一个下滑菜单
                --%>
                <button type="button" class="btn btn-primary" id="addBtn"><span class="glyphicon glyphicon-plus"></span> 创建</button>
                <button type="button" class="btn btn-default" id="editBtn"><span class="glyphicon glyphicon-pencil"></span> 修改</button><%--data-toggle="modal" data-target="#editcheckModal"--%>
                <button type="button" class="btn btn-danger" id="deleteBtn"><span class="glyphicon glyphicon-minus"></span> 删除</button>
            </div>

        </div>
        <%--			数据显示--%>
        <div style="position: relative;top: 10px;">
            <table class="table table-hover">
                <thead>
                <tr style="color: #B3B3B3;">
                    <td><input type="checkbox" id="qx"/></td>
                    <td>船名</td>
                    <td>检测编号</td>
                    <td>检测时间</td>
                    <td>办理人</td>
                    <td>有效期</td>
                    <td>业务办理情况</td>
                </tr>
                </thead>
                <tbody id="checkBody">
                <tr class="active" id="checkTr01">

                </tr>
                <tr class="active" id="checkTr02">


                </tr>
                </tbody>
            </table>
        </div>

        <div style="height: 50px; position: relative;top: 30px;">
            <div id="checkPage">

            </div>
        </div>

    </div>

</div>
</body>
</html>